<template>
  <div class="app-container">
    <!-- 查询表单-->
    
    <div id="content">
      
  
      <el-row>
        <el-col>
          <div class="grid-content bg-purple">
            <i class="el-icon-menu">在线人数 :</i> <span style="color:red" v-html="number" />
          </div>
        </el-col>
        <el-col>
          <div class="grid-content bg-purple-light"></div>
        </el-col>

        
      </el-row>
      <p />

        <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
            
                <!--表格-->
                <el-table
                  v-loading="listLoading"
                  :data="list"
                  @selection-change="handleSelectionChange"
                  element-loading-text="数据加载中"
                  border
                  fit
                  stripe
                  highlight-current-row
                  style="width: 100%"
                  class="infinite-list-item"
                >
                  <!--数据展示-->
                  <el-table-column label="序号"  type="index" width="50" align="center"></el-table-column>
                  <!-- <el-table-column prop="salt" label="头像" width="235"  align="center"/> -->
                  <el-table-column label="头像" prop="salt" align="center">
                  　　<template slot-scope="scope">
                  　　　　<img :src="scope.row.salt" width="40" height="40" />
                  　　</template>
                  </el-table-column>
                  <el-table-column prop="username" label="用户名" width="240" align="center"/>
                  <el-table-column prop="nickName" label="昵称" width="240" align="center" />
                  <el-table-column prop="loginTime" label="上线时间" width="240" align="center" />
                  <el-table-column label="状态" prop="a" width="100" align="center" fixed="right">
             
                     <template slot-scope="scope">
                        <el-button type="success" icon="el-icon-check" circle></el-button>
                        {{scope.row.a}}
                    </template>

              
                </el-table-column>
                  
                </el-table>
            <!-- <li v-for="i in count" class="infinite-list-item">{{ i }}</li> -->
        </ul>

     
      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        background
        style="padding: 30px 0; text-align: center"
        layout="total, prev, pager, next, jumper"
        @current-change="getLine"
      />
    </div>
  </div>
</template>
<script>
//引入调用headlineShow.js文件
import online from "@/api/onLineServer";

export default {
  //写核心代码位置
  // data:{
  // },
  data() {
    //定义变量和初始值
    return {
      listLoading: true, // 是否显示loading信息
      list: null, //查询之后接口返回集合
      page: 1, //当前页
      limit: 5, //每页记录数
      total: 0, //总记录数
      number: 0 ,
      customerShowQuery: {
        name: ""
      }  
    
    };
  },
  created() {
    //页面渲染之前执行，一般调用methods定义的方法
    //调用
    this.getLine();
  },
  mounted() {
    this.listLoading = false;
  },
  methods: {
   

    getLine() {
 
      
      online.getOnLineNumber(this.page,this.limit, this.customerShowQuery)
        .then((response) => {
          // console.log("---------")
          //请求成功
          //response接口返回的数据
          // console.log(response.data.list,"--------")
          this.list = response.data.list;
          this.number=response.data.list.length;
          this.total = response.data.total;
          this.page=response.data.pageNum;
          

        });
    },
   
 
 
   
   
  }
};
</script>
<style>
#content {
  width: 80%;
  margin: 0 auto;
}
.el-row .el-col-24 {
  width: 150px;
}
.el-col-24:nth-child(3),
.el-col-24:nth-child(4) {
  float: right;
}
</style>